<!--
 * @Author: zhoumin
 * @Date: 2021-06-24 09:33:08
 * @LastEditTime: 2021-06-24 10:36:05
 * @LastEditors: zhoumin
 * @Description: 
 * @FilePath: /note/vue-h5/src/components/HelloWorld.vue
-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="dv"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
  .hello{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h1{
      font-size: 16px;
      color:rebeccapurple;
    }
    .dv{
      width: 375px;
      height: 100px;
      background-color: aquamarine;
    }
  }
</style>
